<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框与内间距-盒子模型</title>
    <style>
        /* 1. 边框 */
        .d1 {
            width: 200px;
            height: 200px;
            background-color: #0aa1ed;
            /* 设置4个方向边框的粗细 线型 颜色 */
            border: 5px solid #f00;
            /* 设置单个边框的边框 */
            border-top: 8px solid #ffff00;
            /*
                边框圆角 像素数表示弧度 值越大 角越圆 值为正方形宽高的一半是圆形
                radius: 圆半径
                最大的圆角弧度为圆与该正方形相切的像素数的一半 即相切圆形的半径
                若超过该值 则默认为最大值将其切为一个圆

                注意: 因为double计算的不精确性 所以得出的形状并非正圆
             */
            border-radius: 100px;
        }
        /* 2.掉块问题 */
        .d2 {
            /* 先预设大小才能使用边框盒子方案 */
            width: 200px;
            height: 200px;
            border: 5px solid #0f0;
            padding-left: 50px;
            padding-top: 50px;
            /*
                切换计算方案
                默认计算方案: 添加内间距会进行额外的像素填充 将图形进行非等比例的拉伸放大(类似于表格合并单元格后未删除已被合并的单元格)
                切换为"边框盒子"计算方案后: 内间距的距离会在预设的图形大小的对边处扣除 不会影响图形大小(类似于表格合并单元格后自动删除被合并单元格)
             */
            box-sizing: border-box;
            /* 外边框不计算在元素本身的大小里 但是会占据页面的布局空间 */
            margin: 50px;
        }
        /* 3.行内元素的内间距及视觉生效问题 */
        span {
            border: 3px solid #ff0000;
        }
        .s2 {
            /* 行内元素垂直方向的内外间距都不能使用 只会产生视觉生效而非真正占用空间 水平方向可以正常生效 */
            padding: 50px;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2">内间距测试</div>
<hr>
<span>span</span>
<span class="s2">span</span>
<span>span</span>
<h1>H1标题</h1>
</body>
</html>